---
layout: base
pageScripts:
  - '/js/course.js'
inlineScripts:
  - '../../lib/components/CourseLinks/index.js'
---

{% from 'macros/audio-fab.njk' import audioFab %}
{% from 'macros/audio-player.njk' import audioPlayer %}

{#
  Grab the data for the course using the projectKey defined in the 11tydata.js
  file at the root of the course in /learn/[course]
#}
{% set courseData = courses[projectKey] %}
{% set courseTitle = courseData.meta.title | i18n(locale) %}

{#
  Grab the navigation data for the course. These are the links that will appear
  in the navigation drawer as well as in various places around the course.
#}
{% set pageNavigation = collections.all | navigation(courseData.toc) %}

{#
  Grab the ToC contents for headings ToC. This powers the list of headings
  that appears on the right-hand side of the page. Unfortunately our use of
  the word 'toc' is a bit overloaded :P
#}
{% set tocContents %}
  {{- content | toc | safe -}}
{% endset %}
{% set tocTitle = 'i18n.toc.on_this_page' | i18n(locale) %}

<a class="skip-link button" data-type="primary" href="#main">Skip to main</a>

<div class="course">
  {% include 'partials/header-course.njk' %}

  <div class="sidebar">

    <div class="course__sidebar">
      {% include 'partials/navigation-drawer-course.njk' %}
    </div>

    <div class="course__main">
      {% include 'partials/course-app-bar.njk' %}
      <div class="sticky-observer"></div>
      <div class="gap-top-size-2">
        <div class="sidebar flex-align-start flex-dir-rev flex-wrap-no">
          {% include 'partials/toc-side.njk' %}
          <main id="main">
            <div class="prose">
              <div class="course__intro flow">
                {% for item in pageNavigation.list %}
                  {% if item.url === page.url %}
                    <div class="eyebrow">{{ item.counter }}</div>
                  {% endif %}
                {% endfor %}
                <h1>{{ title | md | safe }}</h1>
                {% if description %}
                <div class="color-mid-text unstyled-code">
                  {# If authors use backticks in their description markdown we don't #}
                  {# want the code to have any border or background color. #}
                  {{ description | md | safe }}
                </div>
                {% endif %}
                {% include 'partials/toc-inner.njk' %}
              </div>
            </div>
            <div class="prose gap-top-size-2">
              {% if audio %}
                {% include 'partials/course-audio.njk' %}
              {% endif %}
              {{ content | safe }}
            </div>
          </main>
        </div>
      </div>

      {% include 'partials/course-pagination.njk' %}

      {% include 'partials/site-footer.njk' %}
    </div>
  </div>
</div>
